<template>
	<view>
		<view class="info-box">
			<view class="">
				<view class="info-title">
					达人昵称
					<text class="required-star">*</text>
				</view>
				<view class="">
					<uv-input placeholder="请输入内容" border="bottom"></uv-input>
				</view>
			</view>
			<view class="">
				<view class="info-title">
					达人账号ID
					<text class="required-star">*</text>
				</view>
				<view class="">
					<uv-input placeholder="请输入内容" border="bottom"></uv-input>
				</view>
			</view>
			<view class="">
				<view class="info-title">
					达人联系方式
					<text class="required-star">*</text>
				</view>
				<view class="">
					<uv-input placeholder="请输入内容" border="bottom"></uv-input>
				</view>
			</view>
			<view class="">
				<view class="info-title">
					账号平台
					<text class="required-star">*</text>
				</view>
				<view class="">
					<uv-form labelPosition="left" :model="model1" :rules="rules" ref="form">
						<uv-form-item prop="userInfo.sex" borderBottom @click="showSexSelect('gender')">
							<uv-input v-model="model1.userInfo.sex" disabled disabledColor="#ffffff"
								placeholder="请选择账号平台" border="none">
							</uv-input>
							<template v-slot:right>
								<uv-icon name="arrow-right"></uv-icon>
							</template>
						</uv-form-item>
					</uv-form>

				</view>
			</view>
			<view class="">
				<view class="info-title">
					主要合作方式
					<text class="required-star">*</text>
				</view>
				<view class="">
					<uv-form labelPosition="left" :model="model1" :rules="rules" ref="form">
						<uv-form-item prop="userInfo.sex" borderBottom @click="showSexSelect('cooperate')">
							<uv-input v-model="model1.userInfo.sex" disabled disabledColor="#ffffff"
								placeholder="请选择主要合作方式" border="none">
							</uv-input>
							<template v-slot:right>
								<uv-icon name="arrow-right"></uv-icon>
							</template>
						</uv-form-item>
					</uv-form>

				</view>

			</view>
			<view class="">
				<view class="info-title">
					账号情况
					<text class="required-star">*</text>
				</view>
				<view class="">
					<uv-form labelPosition="left" :model="model1" :rules="rules" ref="form">
						<uv-form-item prop="userInfo.sex" borderBottom @click="showSexSelect('Accountsituation')">
							<uv-input v-model="model1.userInfo.sex" disabled disabledColor="#ffffff"
								placeholder="请选择账号情况" border="none">
							</uv-input>
							<template v-slot:right>
								<uv-icon name="arrow-right"></uv-icon>
							</template>
						</uv-form-item>
					</uv-form>

				</view>

			</view>
			<view class="">
				<view class="info-title">
					合作机制
					<text class="required-star">*</text>
				</view>
				<view class="">
					<uv-input placeholder="请输入合作机制" border="bottom"></uv-input>
				</view>
			</view>
			<view class="">
				<view class="info-title">
					账号等级
				</view>
				<view class="">
					<uv-form labelPosition="left" :model="model1" :rules="rules" ref="form">
						<uv-form-item prop="userInfo.sex" borderBottom @click="showSexSelect('Accountsituation')">
							<uv-input v-model="model1.userInfo.sex" disabled disabledColor="#ffffff"
								placeholder="请选择账号等级" border="none">
							</uv-input>
							<template v-slot:right>
								<uv-icon name="arrow-right"></uv-icon>
							</template>
						</uv-form-item>
					</uv-form>

				</view>

			</view>
			
			<view class="">
				<view class="info-title">
					是否计入产出
				</view>
				<view class="switch-box">
					<view class="">是</view>
					<view class=""><uv-switch v-model="switchvalue"></uv-switch></view>
					<view class="">否</view>
				</view>
			</view>
			
			
			<view class="">
				<view class="info-title">
					抖音UID
				</view>
				<view class="">
					<uv-input placeholder="请输入抖音UID" border="bottom"></uv-input>
				</view>
			</view>
			<view class="">
				<view class="info-title">
					淘宝客昵称
				</view>
				<view class="">
					<uv-input placeholder="请输入淘宝客昵称" border="bottom"></uv-input>
				</view>
			</view>
			<view class="">
				<view class="info-title">
					淘宝客MemberID
				</view>
				<view class="">
					<uv-input placeholder="请输入淘宝客MemberID" border="bottom"></uv-input>
				</view>
			</view>
			<view class="">
				<view class="info-title">
					备注
				</view>
				<view class="">
					
					
					<uv-textarea v-model="value" placeholder="请输入内容"></uv-textarea>
				</view>
			</view>

			<!-- 弹出层 -->
			<uv-action-sheet ref="sexSelect" :actions="actions" @select="sexSelect">
			</uv-action-sheet>
		</view>


	</view>
</template> 

<script>
	export default {
		data() {
			return {
				model1: {
					userInfo: {
						sex: '',
					},
				},
				// 账号平台
				actions: [{
					dictLabel: '抖音',
					dictCode: 0
				}, {
					name: '小红书',
					dictCode: 1
				}, ],

				rules: {
					'userInfo.sex': {
						type: 'string',
						max: 1,
						required: true,
						message: '请选择男或女',
						trigger: ['blur', 'change']
					},
				},
				value: '',
				switchvalue:true

			};

		},
		methods: {
			// 性别选择
			showSexSelect(item) {
				console.log(item);
				if (item == 'gender') {
					console.log('账号平台');
				} else if (item == 'cooperate') {
					console.log('合作方式');
				}
				this.$refs.sexSelect.open();
				// this.hideKeyboard();
			},
			// 性别选择返回结果 
			sexSelect(e) {
				this.model1.userInfo.sex = e.name;
				// 对部分表单字段进行校验
				this.$refs.form.validateField('userInfo.sex', err => {
					// 处理错误后的逻辑
				})
			},
			hideKeyboard() {
				uni.hideKeyboard()
			},
			// 合作方式
			showcooperate() {

			}
		}
	}
</script>

<style lang="less">
	.info-box {
		width: 95%;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		gap: 30rpx;
		padding: 50rpx 0px;


		.info-title {
			padding-left: 20rpx;
			margin-bottom: 20rpx;

			.required-star {
				color: red;
				font-size: 28rpx;
				margin-left: 6rpx;
			}
			
		}
		.switch-box{
			

			display: flex;
			align-items: center;
			gap: 20rpx;
			padding-left: 20rpx;
		}
	}
</style>